<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 顶部区域 -->
      <a-col :span="24">
        <a-card>
          <!-- 查询参数 -->
          <pro-query
            :searchParam="searchParam"
            @on-search ="search"
          ></pro-query>
        </a-card>
      </a-col>
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :toolbar="toolbar"
            :param="state.param"
            :pagination="pagination"
            :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
          >
            <!-- 继承至 a-table 的默认插槽 -->
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
    <a-modal v-model:visible="visible" title="新增题库" @ok="handleOk">
      <a-input v-model:value="addParam.title" placeholder="题库名称" />
      <br />
      <br />
      <a-textarea v-model:value="addParam.remark" placeholder="备 注" :rows="4" />
    </a-modal>
</template>

<script>
import { paging,save,remove} from "@/api/module/repo.js";
import {reactive, ref, toRaw,createVNode} from 'vue';
import {message} from "_ant-design-vue@2.2.8@ant-design-vue";
import {Modal} from "ant-design-vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

export default {
  setup() {

    const tableRef = ref()
    let selectParam = ''; // 查询参数
    const columns = [
      { dataIndex: "title", key: "title", title: "题库名称" },
      { dataIndex: "radioCount", key: "radioCount", title: "单选题数量"},
      { dataIndex: "multiCount", key: "multiCount", title: "多选题数量" },
      { dataIndex: "judgeCount", key: "judgeCount", title: "判断题数量" },
      { dataIndex: "createTime", key: "createTime", title: "创建时间" },
    ];
    /// 查询配置
    const fetch = async (param) => {
      let dataParam = {
        current: 1,
        size: 10,
        // "selectParam": selectParam,
      }
      if(selectParam != ''){
        dataParam = {
          current: 1,
          size: 10,
          params: {title: selectParam}
        }
      }

      var response = await paging(dataParam);
      return {
        total: response.data.total,
        data: response.data.records,
      };
    };
    /// 工具栏
    const toolbar = [
      { label: "新增", event: function () { showModal() }},
      { label: "删除", event: function (record) {
        console.log("删除参数+++",record)
        removeMethod(record) }},
    ];
    /// 分页参数
    const pagination = {
      pageNum: 1,
      pageSize: 10,
    }
    /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
    const state = reactive({
      selectedRowKeys: [],
      param: {},
    })
    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };
    /// 查询参数
    const searchParam = [
      { key: "name", type: "input", label: "题库名称"},
    ]
    /// 查询操作
    const search = function(value) {
      state.param = value
      selectParam = toRaw(state.param).name
      console.log("查询参数+",selectParam)
      tableRef.value.reload()
    }

    // 新增
    const visible = ref(false);

    const showModal = () => {
      visible.value = true;
    };
    // 新增
    const handleOk = e => {
      console.log("新增参数+",toRaw(addParam.value))
      console.log(e);
      save(toRaw(addParam.value)).then((response)=>{
        if(response.success){
          message.success({ content: '保存成功', duration: 1 }).then(()=>{
            addParam.value.title = ''
            addParam.value.remark = ''
              tableRef.value.reload()
          });
        }else{
          message.error({ content: '保存失败', duration: 1 }).then(()=>{
            addParam.value.title = ''
            addParam.value.remark = ''
            tableRef.value.reload()
          });
        }
      })
      visible.value = false;
    };
    const addParam = ref({
      title: '',
      remark: '',
    })
    /// 删除用户
    const removeMethod = (record) => {

      Modal.confirm({
        title: '确定删除这些题库吗?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',

        onOk() {
          let dataParam={
            ids:toRaw(state.selectedRowKeys)
          }
          remove(dataParam).then((response) => {
            if(response.success){
              message.success({content: "删除成功" , duration: 1}).then(() =>
                tableRef.value.reload()
              )
            }else{
              message.error({content: "删除失败", duration: 1})
              tableRef.value.reload()

            }
          })
        },

        onCancel() {
          console.log('Cancel');
        },

      });
    }

    return {
      state,
      fetch,
      search,
      toolbar,
      columns,
      pagination,
      searchParam,
      onSelectChange,


      tableRef,
      visible,
      showModal,
      handleOk,
      addParam,
      removeMethod,
    };
  },
};
</script>
